<!DOCTYPE html>
<style>
  .system-ui-font {
    font-family: system-ui, cursive;
  }
</style>
<div style="display: flex;">
<div style="flex: 1; font-size: 12px;">
<div class="system-ui-font" style="font-weight: 100;">System font at weight 100</div>
<div class="system-ui-font" style="font-weight: 200;">System font at weight 200</div>
<div class="system-ui-font" style="font-weight: 300;">System font at weight 300</div>
<div class="system-ui-font" style="font-weight: 400;">System font at weight 400</div>
<div class="system-ui-font" style="font-weight: 500;">System font at weight 500</div>
<div class="system-ui-font" style="font-weight: 600;">System font at weight 600</div>
<div class="system-ui-font" style="font-weight: 700;">System font at weight 700</div>
<div class="system-ui-font" style="font-weight: 800;">System font at weight 800</div>
<div class="system-ui-font" style="font-weight: 900;">System font at weight 900</div>
<div class="system-ui-font" style="font-variation-settings: 'wght' 100;">Variable system font at weight 100</div>
<div class="system-ui-font" style="font-variation-settings: 'wght' 200;">Variable system font at weight 200</div>
<div class="system-ui-font" style="font-variation-settings: 'wght' 300;">Variable system font at weight 300</div>
<div class="system-ui-font" style="font-variation-settings: 'wght' 400;">Variable system font at weight 400</div>
<div class="system-ui-font" style="font-variation-settings: 'wght' 500;">Variable system font at weight 500</div>
<div class="system-ui-font" style="font-variation-settings: 'wght' 600;">Variable system font at weight 600</div>
<div class="system-ui-font" style="font-variation-settings: 'wght' 700;">Variable system font at weight 700</div>
<div class="system-ui-font" style="font-variation-settings: 'wght' 800;">Variable system font at weight 800</div>
<div class="system-ui-font" style="font-variation-settings: 'wght' 900;">Variable system font at weight 900</div>
<div class="system-ui-font" style="font-weight: 700; font-variation-settings: 'wght' 100;">Variable system font at weight 100 overriden</div>
<div class="system-ui-font" style="font-weight: 700; font-variation-settings: 'wght' 200;">Variable system font at weight 200 overriden</div>
<div class="system-ui-font" style="font-weight: 700; font-variation-settings: 'wght' 300;">Variable system font at weight 300 overriden</div>
<div class="system-ui-font" style="font-weight: 700; font-variation-settings: 'wght' 400;">Variable system font at weight 400 overriden</div>
<div class="system-ui-font" style="font-weight: 700; font-variation-settings: 'wght' 500;">Variable system font at weight 500 overriden</div>
<div class="system-ui-font" style="font-weight: 700; font-variation-settings: 'wght' 600;">Variable system font at weight 600 overriden</div>
<div class="system-ui-font" style="font-weight: 700; font-variation-settings: 'wght' 700;">Variable system font at weight 700 overriden</div>
<div class="system-ui-font" style="font-weight: 700; font-variation-settings: 'wght' 800;">Variable system font at weight 800 overriden</div>
<div class="system-ui-font" style="font-weight: 700; font-variation-settings: 'wght' 900;">Variable system font at weight 900 overriden</div>
</div>
<div style="flex: 1; font-size: 20px;">
<div class="system-ui-font" style="font-weight: 100;">System font at weight 100</div>
<div class="system-ui-font" style="font-weight: 200;">System font at weight 200</div>
<div class="system-ui-font" style="font-weight: 300;">System font at weight 300</div>
<div class="system-ui-font" style="font-weight: 400;">System font at weight 400</div>
<div class="system-ui-font" style="font-weight: 500;">System font at weight 500</div>
<div class="system-ui-font" style="font-weight: 600;">System font at weight 600</div>
<div class="system-ui-font" style="font-weight: 700;">System font at weight 700</div>
<div class="system-ui-font" style="font-weight: 800;">System font at weight 800</div>
<div class="system-ui-font" style="font-weight: 900;">System font at weight 900</div>
<div class="system-ui-font" style="font-variation-settings: 'wght' 100;">Variable system font at weight 100</div>
<div class="system-ui-font" style="font-variation-settings: 'wght' 200;">Variable system font at weight 200</div>
<div class="system-ui-font" style="font-variation-settings: 'wght' 300;">Variable system font at weight 300</div>
<div class="system-ui-font" style="font-variation-settings: 'wght' 400;">Variable system font at weight 400</div>
<div class="system-ui-font" style="font-variation-settings: 'wght' 500;">Variable system font at weight 500</div>
<div class="system-ui-font" style="font-variation-settings: 'wght' 600;">Variable system font at weight 600</div>
<div class="system-ui-font" style="font-variation-settings: 'wght' 700;">Variable system font at weight 700</div>
<div class="system-ui-font" style="font-variation-settings: 'wght' 800;">Variable system font at weight 800</div>
<div class="system-ui-font" style="font-variation-settings: 'wght' 900;">Variable system font at weight 900</div>
<div class="system-ui-font" style="font-weight: 700; font-variation-settings: 'wght' 100;">Variable system font at weight 100 overriden</div>
<div class="system-ui-font" style="font-weight: 700; font-variation-settings: 'wght' 200;">Variable system font at weight 200 overriden</div>
<div class="system-ui-font" style="font-weight: 700; font-variation-settings: 'wght' 300;">Variable system font at weight 300 overriden</div>
<div class="system-ui-font" style="font-weight: 700; font-variation-settings: 'wght' 400;">Variable system font at weight 400 overriden</div>
<div class="system-ui-font" style="font-weight: 700; font-variation-settings: 'wght' 500;">Variable system font at weight 500 overriden</div>
<div class="system-ui-font" style="font-weight: 700; font-variation-settings: 'wght' 600;">Variable system font at weight 600 overriden</div>
<div class="system-ui-font" style="font-weight: 700; font-variation-settings: 'wght' 700;">Variable system font at weight 700 overriden</div>
<div class="system-ui-font" style="font-weight: 700; font-variation-settings: 'wght' 800;">Variable system font at weight 800 overriden</div>
<div class="system-ui-font" style="font-weight: 700; font-variation-settings: 'wght' 900;">Variable system font at weight 900 overriden</div>
</div>
</div>
